<template>
  <!-- 播放进度 -->
  <div class="m-pbar">
    <div class="barbg">
      <div class="rdy" @click="curClick($event)" ref="rdyRef"></div>
      <div
        class="cur"
        :style="{ width: (curwidth > 100 ? 100 : curwidth) + '%' }"
        @click="curClick($event)"
      >
        <span class="btn" @mousedown="btnMousedown"><i></i></span>
      </div>
      <span class="time"
        ><em>{{ currentTimeFormat }}</em
        >/ {{ (duration * 1000) | songDuration }}</span
      >
    </div>
  </div>
</template>

<script>
import { songDuration } from '@/utils/filters.js'
export default {
  props: ['curwidth', 'duration', 'currentTimeFormat'],
  methods: {
    // 监听鼠标在进度条中的移动
    rdyMove(e) {
      const left = this.$refs.audiomainRef.offsetLeft + this.$refs.playwrapRef.offsetLeft
      let tempWidth = ((e.clientX - left) / 466) * 100
      tempWidth = tempWidth < 0 ? 0 : tempWidth > 100 ? 100 : tempWidth
      console.log(tempWidth)
      this.curwidth = tempWidth
      this.currentTime =
        (this.curwidth / 100) * this.duration > this.duration
          ? this.duration
          : (this.curwidth / 100) * this.duration
    },
    // 进度条按钮鼠标按下
    btnMousedown() {
      this.btnIsClick = true
      clearInterval(this.timer)
      clearInterval(this.timerLyc)
      this.timer = null
      this.timerLyc = null
      this.$refs.audioPlayRef.addEventListener('mousemove', this.rdyMove)
      this.$refs.audioPlayRef.addEventListener('mouseleave', () => {
        this.$refs.audioPlayRef.removeEventListener('mousemove', this.rdyMove)
      })
      this.$refs.audioPlayRef.addEventListener('mouseup', () => {
        if (this.btnIsClick) {
          this.$refs.audioPlayRef.removeEventListener('mousemove', this.rdyMove)
          console.log(this.paused)
          if (this.paused) {
            clearInterval(this.timer)
            clearInterval(this.timerLyc)
            this.timer = null
          } else {
            console.log('mouseupinter')
            this.setInter()
          }
          this.btnIsClick = false
        }
      })
    },
    // 进度条按钮鼠标松开
    btnMouseup() {
      this.btnIsClick = false
    },
    curClick(e) {
      // console.log(e)
      // console.log(e.clientX)
      // console.log(e.clientX - 455)
      const left = this.$refs.audiomainRef.offsetLeft + this.$refs.playwrapRef.offsetLeft
      this.curwidth =
        ((e.clientX - left) / 466) * 100 > 100 ? 100 : ((e.clientX - left) / 466) * 100
      if (!this.audio) {
        this.audio = new Audio(this.src)
      }
      this.audio.currentTime = (this.curwidth / 100) * this.duration
      // console.log((this.curwidth / 100) * this.audio.duration)
      // this.audio.fastSeek((this.curwidth / 100) * this.audio.duration)
      // console.log(this.audio.currentTime)
      this.currentTime = (this.curwidth / 100) * this.duration
    }
  },
  filters: {
    songDuration
  }
}
</script>

<style lang="less" scoped>
@import './playProgress.less';
</style>
